<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f1" x=".2" y=".2" width=".8" height=".8" >
                <feDropShadow dx="10" dy="10" stdDeviation="2"></feDropShadow>
            </filter>
        </defs>

        <image href="../imgs/7.png" x="10" y="10" height="80" width="80" filter="url(#f1)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <!-- <filter id="f2" x=".2" y=".2" width=".8" height=".8" > -->
            <filter id="f21">
               <feGaussianBlur in="BackgroundImage" stdDeviation="1"/>
            </filter>

            <filter id="f22">
                <feGaussianBlur in="BackgroundImage" stdDeviation="2"/>
             </filter>
        </defs>

        <image href="../imgs/7.png" x="10" y="10" height="80" width="80" filter="url(#f22)"  transform="translate(-10 -10)"/>
        <image href="../imgs/7.png" x="10" y="10" height="80" width="80" />
        <image href="../imgs/7.png" x="10" y="10" height="80" width="80"  filter="url(#f21)" transform="translate(10 10)"/>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
        <defs>
          <filter id="circleFilterGauss">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
          </filter>
        </defs>
        <g>
          <circle cx="50" cy="50" r="40" style="fill:none;stroke:black;"/>
        </g>
        <g transform="translate(90)">
          <circle cx="50" cy="50" r="40"
          style="fill:none;stroke:black;filter:url(#circleFilterGauss)"/>
        </g>
      </svg>
      

    <script src="index.js"></script>
</body>
</html>